import { SVG } from "@libs/svg.js-3.2.0/build/svg.esm.js";

const lerp = (p_min, p_max, data_min, data_max, data) => {
    const delta = (data - data_min) / (data_max - data_min);
    const deltaP = (p_max - p_min) * delta;
    return p_min + deltaP;
}


export const initializeYCSVGPack = async (domElement, svgRawContent) => {

    // 需要被替换为图片的元素
    const imageResources = [
        // {
        //     father: "#element",
        //     replaced: "#element_replaced",
        //     url: "/element.png",
        //     svgdotjsImageObject: undefined,
        // },
    ];

    const containerActiveAttr = { fill: "rgba(250, 235, 215, 255)", stroke: "rgba(210, 222, 226, 255)" };
    const containerInActiveAttr = { fill: "rgba(0, 0, 0, 0)", stroke: "rgba(0, 0, 0, 0)" };

    return new Promise((resolve, reject) => {

        const draw = SVG().addTo(domElement); // 挂载到dom元素
        draw.svg(svgRawContent);
        const remove = () => { draw.remove(); } // 从dom元素注销

        /** 所有的替换图片都加载完毕 */
        const onImagesLoaded = () => {
            const pp = 448 / 25.714; // 比例尺(svg单位/m)
            const elements = {};
            const containers = [];
            for (let i = 1; i <= 6; i++) { // 列号
                for (let j = 1; j <= 6; j++) { // 层数
                    const elementID = `containerGroup0${i}${j}`;
                    const element = draw.find(`#${elementID}`)[0];
                    elements[elementID] = element;
                    const elementContainerID = `container0${i}${j}`;
                    const elementContainer = element.children()[0];
                    elements[elementContainerID] = elementContainer;
                }
            }
            elements["LaneTruck"] = draw.find("#LaneTruck")[0];
            elements["LaneTruckContainer"] = draw.find("#LaneTruckContainer")[0];

            elements["TrolleyRailcar"] = draw.find("#TrolleyRailcar")[0];
            elements["TrolleyCab"] = draw.find("#TrolleyCab")[0];
            elements["Trolley"] = draw.find("#Trolley")[0];
            elements["TrolleyContainer"] = draw.find("#TrolleyContainer")[0];
            elements["TrolleyRopeGroup"] = draw.find("#TrolleyRopeGroup")[0];
            // elements[""].x(), elements[""].y();

            /**
             * 设置抓斗车在水平方向的位置
             * 小车在图上最右端为 380
             * 驾驶舱在图上最右端为 442
             * 小车最小3.5
             * 小车最大15
             * @param {*} x 米
             */
            const setTrolleyX = (x) => {
                // 从右往左的
                elements["TrolleyRailcar"].x(380 + 8 - pp * x);
                elements["TrolleyCab"].x(442 + 8 - pp * x);

                // 从左往右的
                // elements["TrolleyRailcar"].x(0 + 17 + pp * x);
                // elements["TrolleyCab"].x(0 + 17 + pp * x);
            }

            /**
             * 设置抓斗车在垂直方向的位置
             * 图上地面高度: 546 - 21 = 525
             * 抓斗最低5左右
             * 抓斗最高17+左右
             * @param {*} y 米
             */
            const setTrolleyY = (y) => {
                elements["Trolley"].y(525 - 55 - pp * y);
                const ropes = elements["TrolleyRopeGroup"].children();
                for (let i = 0; i < ropes.length; i++) {
                    const rope = ropes[i];
                    rope.attr({ y2: 525 - 55 - pp * y + 10 });
                }
            }

            /**
             * 设置抓斗集装箱是否可见
             * @param {*} visiable 
             */
            const setTrolleyContainerVisiable = (visiable) => {
                if (visiable) elements["TrolleyContainer"].show();
                else elements["TrolleyContainer"].hide();
            }

            /**
             * 设置集卡是否可见
             * @param {*} visiable 
             */
            const setLaneTrunkVisiable = (visiable) => {
                if (visiable) elements["LaneTruck"].show();
                else elements["LaneTruck"].hide();
            }

            /**
             * 设置集卡集装箱是否可见
             */
            const setLaneTrunkContainerVisiable = (visiable) => {
                if (visiable) elements["LaneTruckContainer"].show();
                else elements["LaneTruckContainer"].hide();
            }

            /** 图片复位 */
            const reset = () => {
                for (let i = 1; i <= 6; i++) { // 贝位号
                    for (let j = 1; j <= 6; j++) { // 高度
                        const elementID = `container0${i}${j}`;
                        const elementContainer = elements[elementID];
                        elementContainer.attr(containerInActiveAttr);
                    }
                }
                setLaneTrunkVisiable(false);
            }

            /**
             * 设置堆场集装箱状态
             * @param {*} columnNo 列号
             * @param {*} layer 层数
             */
            const setYardContainerStatus = (columnNo, layer) => {
                for (let i = 1; i <= 6; i++) {
                    const elementID = `container0${columnNo}${i}`;
                    const elementContainer = elements[elementID];
                    console.log(elementContainer, i <= layer);
                    if (i <= layer) elementContainer.attr(containerActiveAttr);
                    else elementContainer.attr(containerInActiveAttr);
                }
            }

            resolve({
                draw,
                remove,
                reset,

                setTrolleyX,
                setTrolleyY,
                setTrolleyContainerVisiable,
                setLaneTrunkVisiable,
                setLaneTrunkContainerVisiable,
                setYardContainerStatus,

            });
        }

        if (imageResources.length) {
            let loadedImages = 0;
            for (let i = 0; i < imageResources.length; i++) {
                const imageResourcesObject = imageResources[i];
                imageResourcesObject.svgdotjsImageObject = draw.image(imageResourcesObject.url).on("load", () => {
                    const fatherS = draw.find(imageResourcesObject.father)[0];
                    const replacedS = draw.find(imageResourcesObject.replaced)[0];
                    // console.log(replacedS, replacedS.x(), replacedS.y());
                    imageResourcesObject.svgdotjsImageObject.addTo(fatherS);
                    imageResourcesObject.svgdotjsImageObject.move(replacedS.x(), replacedS.y());
                    replacedS.remove();

                    loadedImages += 1;
                    if (loadedImages === imageResources.length) { onImagesLoaded(); }
                });
            }
        }
        else { onImagesLoaded(); }
    })

}